<template>
  <div class="adoptedVideo">
    <y-table
        ref="table"
        border
        pagination
        :getDataWay="getDataWay"
        :columns="columns"
    >
      <template slot="button">
        <el-button type="primary" @click="addVideo" v-if="isEdit">添加视频</el-button>
      </template>
      <el-table-column slot="totalUrl" label="视频" align="center" header-align="center" width="400">
        <template v-slot="{row}">
          <el-link :underline="false" @click="showVideo(row)">{{row.totalUrl.split('/').pop()}}</el-link>
        </template>
      </el-table-column>
      <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="150" v-if="isEdit">
        <template v-slot="scope">
          <div class="table-buttons">
            <el-button type="primary" size="mini" @click="editVideo(scope.row)">编辑</el-button>
            <el-popconfirm
                title="是否确认删除该视频？"
                @confirm="delVideo(scope.row)">
              <el-button slot="reference" type="danger" size="mini">删除</el-button>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </y-table>
    <y-form
      ref="yForm"
      v-model="forms.formModel"
      :visible.sync="forms.showForm"
      :title="forms.formTypeTitle[forms.formsType]"
      destroy-on-close
      append-to-body
      width="50%"
      :form-attrs="forms.formAttrs"
      :columns="formColumns"
      @ensure="ensureModel">
    </y-form>
    <el-dialog
      :visible.sync="videoForms.showForm"
      @closed="closeVideo"
      append-to-body>
      <video
          :src="generateMediaUrl({
          fileOpenUrl: videoForms.currentForm.totalUrl
         })" controls autoplay style="width: 100%; max-height: 80vh;"></video>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "adoptedVideo",
  inject: ['getDictNameSync', 'pattern', 'generateMediaUrl'],
  props:{
    adoptedId: String,
    isEdit: Boolean
  },
  computed:{
    getDataWay(){
      return{
        dataType: 'url',
        data: this.$api.adopted.queryAdoptedAlbumList,
        param: Object.assign({
          adoptedId: this.adoptedId,
          albumType: '2'
        }, this.model)
      }
    },
    formColumns(){
      return [
        {
          label: "视频",
          prop: "totalUrl",
          comp:{
            compType: 'YUploadVideoSingle',
            attrs:{
              model: {
                videoAttachmentId: this.forms.formModel.attachmentId,
                videoName: '',
                videoUrl: this.forms.formModel.totalUrl
              },
              businessSysModuleCode: "ADOPTED_DETAIL_ALBUM",
              showDelete: true,
              customStyle: {
                display: 'inline-block'
              }
            },
            listeners:{
              updateExactly: this.updateModel
            }
          }
        },
        {
          label: "排序",
          prop: "albumOrder",
          comp:{
            compType: 'input-number',
            attrs:{
              stepStrictly: true
            }
          }
        }
      ]
    }
  },
  data(){
    return {
      model:{

      },
      columns: [{
        label: "视频",
        prop: "totalUrl",
        template: true,
      },{
        label: "操作人",
        prop: "updateUserName"
      },{
        label: "排序",
        prop: "albumOrder"
      }],
      forms:{
        formsType: '',
        formTypeTitle: {
          'ADD': '添加视频',
          'EDIT': '编辑视频'
        },
        formModel:{
          attachmentId: '',
          totalUrl: '',
          albumOrder: ''
        },
        currentForm: null,
        showForm: false,
        formAttrs:{
          labelWidth: '100px',
          rules: {
            totalUrl: [{required: true, message: "请选择视频", trigger: "change"}],
          }
        }
      },
      videoForms:{
        currentForm: {},
        showForm: false,
      }
    }
  },
  methods:{
    resetForm(){
      Object.keys(this.forms.formModel).map(key => {
        this.forms.formModel[key] = this.forms.currentForm ? this.forms.currentForm[key] : '';
      })
    },
    addVideo(){
      this.forms.formsType = 'ADD';
      this.forms.currentForm = null;
      this.resetForm();
      this.forms.showForm = true;
    },
    search(){
      this.$refs['table'].loadData(Object.assign({
        adoptedId: this.adoptedId,
        albumType: '2'
      }, this.model));
    },
    editVideo(row){
      this.forms.formsType = 'EDIT';
      this.forms.currentForm = row;
      this.resetForm();
      this.forms.showForm = true;
    },
    delVideo(row){
      this.$yAxios({
        url: this.$api.adopted.removeAdoptedAlbum,
        data:{
          ids: [row.id]
        }
      }, info => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.search();
      })
    },
    showVideo(row){
      this.videoForms.currentForm = row;
      this.videoForms.showForm = true;
    },
    closeVideo(){
      this.videoForms.currentForm = {};
    },
    updateModel({type, file}){
      switch(type) {
        case 'delete': {
          this.forms.formModel.attachmentId = '';
          this.forms.formModel.totalUrl = '';
          break;
        }
        case 'add':{
          this.forms.formModel.attachmentId = file.videoAttachmentId;
          this.forms.formModel.totalUrl = file.videoUrl;
          this.$refs['yForm'].validate();
          break;
        }
      }
    },
    ensureModel(form){
      let newForm;
      if(this.forms.formsType === 'EDIT'){
        newForm = Object.assign({}, this.forms.currentForm, form);
      }else{
        newForm = Object.assign({ adoptedId: this.adoptedId, albumType: '2' }, form);
      }
      this.$yAxios({
        url: this.$api.adopted.saveAdoptedAlbum,
        data: newForm
      }, info => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        this.search();
      })
    },
  }
}
</script>

<style scoped>

</style>